import './cms.button.scss'
import {iReactivityApi} from "../../packages/utils/types.base";
import {createClasses} from "../../packages/utils/createClass";

/**
 * 创建CmsButton组件
 * @author  韦胜健
 * @date    2022/2/6 13:12
 */
export function createCmsButton({type, designComponent, computed}: iReactivityApi) {

    const classes = createClasses(type)

    return designComponent({
        props: {
            mode: {type: String, default: 'light'},         // 按钮类型: dark,light
            size: {type: String, default: 'large'},         // 大小尺寸:large,normal,small
            width: {type: String},                          // 按钮宽度
            arrow: {type: Boolean},                         // 是否带箭头图标
        },
        slots: ['default'],
        setup({props, slots}: any) {
            const buttonCls = computed(() => [
                'cms-button',
                `cms-button-size-${props.size}`,
                `cms-button-mode-${props.mode}`,
            ].join(' '))
            const styles = computed(() => ({width: props.width}))
            return () => (
                <button {...classes(buttonCls.value, {style: styles.value})}>
                    {slots.default()}
                    {props.arrow && <i {...classes('cms-icon plicon-right-arrow')}/>}
                </button>
            )
        },
    })
}